<template>
	<view :class="vi_pageSize">
		<vi-notify :top="topfix" ref="vi_notify"></vi-notify>
		<module-loading ref="vi_loading" :loading="vi_loading" :loadingMask="vi_loadingMask"></module-loading>
		<vi-headbar goback>
			<view slot="right">
				响应式
				<text class="response">开启</text>
				<text class="noresponse color-warning">关闭</text>
			</view>
			{{vi_pageTitle}}
		</vi-headbar>
		<view class="docTable">
			<view class="th">
				<view>属性名</view>
				<view>类型</view>
				<view>默认值</view>
				<view>描述</view>
			</view>
			<view class="tr">
				<view>value</view>
				<view>String, Number</view>
				<view>无</view>
				<view>时间值</view>
			</view>
			<view class="tr">
				<view>autoRefresh</view>
				<view>Boolean</view>
				<view>false</view>
				<view>自动刷新</view>
			</view>
			<view class="tr extra">
				<view class="body">
					<view>text</view>
					<view>Object</view>
					<view></view>
					<view>内部文字数据覆盖</view>
				</view>
				<view class="appendix">
					格式：{key:"文字"}
					<view>just：刚刚　一分钟内</view>
					<view>minutesAgo：分钟前　一小时以内</view>
					<view>hoursAgo：小时前　一天内</view>
					<view>daysAgo：天前　一月内</view>
					<view>monthsAgo：月前　一年内</view>
					<view>yearsAgo：年前　一年以上</view>
				</view>
			</view>
		</view>
		
		<view class="p-sm">
			<view class="py-sm">
				基本使用：{{'&lt;common-dialog ref="组件id" mode="方案名" title="对话框标题">对话框内容&lt;/common-dialog>'}}
			</view>
			<view class="py-sm">
				<text>当前时间：</text>
				<vi-timetips :value="now"></vi-timetips>
			</view>
			<view class="py-sm">
				<text>昨天：</text>
				<vi-timetips :value="yesterday"></vi-timetips>
			</view>
			<view class="py-sm">
				<text>自动刷新：</text>
				<vi-timetips :value="now" autoRefresh></vi-timetips>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default { 
		data() {
			return {
				now:Date.now(),
			}
		},
		computed:{
			yesterday(){
				return this.now - 86400000
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
.response{
	display: if($useResponse, inline, none);
}
.noresponse{
	display: if($useResponse, none, inline);
}
</style>
